<script setup lang="ts">
// defineProps({
//   title: String,
//   rightText: String
// })
defineProps<{
  title?: string
  rightText?: string
}>()

// const emits = defineEmits(['click-left'])
const emits = defineEmits<{
  (e: 'click-left'): void
  (e: 'click-right'): void
}>()

const onClickLeft = () => {
  emits('click-left')
}

const onClickRight = () => {
  emits('click-right')
}
</script>

<template>
  <van-nav-bar
    :title="title"
    :right-text="rightText"
    left-arrow
    @click-left="onClickLeft"
    @click-right="onClickRight"
  />
  <!-- <div class="main"></div> -->
</template>

<style lang="scss" scoped>
// 深度选择器有很多种写法， vue2 3. less sass
// 样式穿透， 在我们这个cp-nav-bar组件里面，要修改van的组件的样式，如果有scoped，就会给下面的类名，加一个属性选择器  .van-nav-bar__text[data-xxx-ssss] 和vant的样式就匹配不到了，就不能修改样式，
:deep() {
  .van-nav-bar {
    &__text {
      // 这个颜色要用主题色， 用css变量，通过var去引入
      color: var(--hm-92-main-clor);
    }
  }
}
// .van-nav-bar__text {
//   color: red;
// }

// :deep() {
//   .van-nav-bar__text {
//     color: red;
//   }
// }
</style>

<!-- <style lang="scss" scoped>
.main {
  color: blue;
}
</style> -->
